<template>
  <div>
    <Main_header></Main_header>
    <div class="common">
      <div class="content">
        <!--全部商品图片展示-->
        <div class="contentImg">
          <div class="title">
            <h2>精选商铺</h2>
          </div>
          <div>
            <el-row>
              <el-col v-for="(store,index) in storeList" :key="index">
                <el-card class="user-card" :body-style="{ padding: '0px' }" shadow="hover">
                    <div>
                      <div class="img-container">
                        <el-tooltip class="item" effect="dark" content="点我查看商品！" placement="top">
                          <img :src="store.storePic" class="avatar_img_isfang" @click="showAllGoodView(store)">
                        </el-tooltip>

                        <div cLass="userinfo-container" style="margin-top: 40px">
                          <el-descriptions :column="1" size="small">
                            <el-descriptions-item label="商铺名称">{{store.storeName}}</el-descriptions-item>
                            <el-descriptions-item label="商铺描述">{{store.description}}</el-descriptions-item>
                            <el-descriptions-item label="入驻时间">{{store.createTime}}</el-descriptions-item>
                            <el-descriptions-item label="商铺积分">
                              <el-rate
                                v-model="store.score"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                              </el-rate>
                            </el-descriptions-item>
                            <el-descriptions-item label="详细地址">{{store.detailAddress}}</el-descriptions-item>
                          </el-descriptions>
                        </div>
                      </div>
                    </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <Main_footer style="margin:0 auto"></Main_footer>
  </div>
</template>

<script>
  import Main_header from '../../components/main/Main_header'
  import Main_footer from '../../components/main/Main_footer'
  export default {
    name: 'AllStore',
    components: {
      Main_footer,
      Main_header
    },
    data(){
      return{
        storeList:[],
      }
    },
    mounted(){
      this.initAllStore();
    },
    methods:{
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initAllStore();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initAllStore();
      },
      //查询全部数据
      initAllStore () {
        this.getRequest('/good/data/yesStore').then(resp => {
          if (resp) {
            console.log(resp);
            this.storeList=resp;
          }
        })
      },
      // 点击图片事件
      showAllGoodView(data) {
        console.log(data.storeUserId)
        // 传递参数到StoreGood页面
        this.$router.push({
          path: '/storeGood',
          name: 'StoreGood',
          params: {
            name: data.storeUserId,
          }
        })

      }
    },
  }
</script>

<style scoped>
  .common{
    width: 70%;
    margin: 50px auto;
  }
  .content{
    width: 100%;
  }
  .contentImg{
    width: 100%;
  }
  .user-card{
    width: 100%;
  }
  .avatar_img_isfang{
    width: 160px;
    height: 160px;
    margin: 20px 50px 20px 30px;
  }
  .img-container{
    width: 100%;
    display: flex;
    margin-left: 20px;
  }
  .userinfo-container el-descriptions-item{
    font-size: 14px;
    color: cornflowerblue;
  }

</style>
